<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }


    .top {
        height: 40px;
        background-color: rgb(51, 51, 51);
        font-size: 12px;
    }

    .top .content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        height: 40px;
        margin: auto 252px;
    }

    .top .content .left ul {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: rgb(51, 51, 51);
        width: 769px;
        height: 40px;
    }

    .top .content .left span {
        color: rgb(66, 66, 66);
    }

    .top .content .left a {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        color: rgb(176, 176, 176);
    }

    .top .content .left ul a:hover {
        background-color: rgb(51, 51, 51);
        color: rgb(255, 255, 255);
    }

    .top .content .right {
        display: flex;
        flex-direction: row;
    }

    .top .content .right .login {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 120px;
        height: 40px;
    }

    .top .content .right .login a {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        color: rgb(176, 176, 176);
    }

    .top .content .right span {
        color: rgb(66, 66, 66);
    }

    .top .content .right ul a:hover {
        background-color: rgb(51, 51, 51);
        color: rgb(255, 255, 255);
    }

    .top .content .right .car {
        width: 120px;
        height: 40px;
        background-color: #7e49c7;
        margin-left: 20px;
    }

    .top .content .right .car a {
        display: inline-block;
        height: 40px;
        width: 120px;
        background-color: rgb(66, 66, 66);
        color: rgb(176, 176, 176);
        text-align: center;
        line-height: 40px;
    }

    .top .content .right .car a:hover {
        color: rgb(255, 103, 0);
    }

    /*
        ------------------------------------------------------------------------------
    */

    .pro-body {
        width: 1226px;
        margin: 0 auto;
        background-color: rgb(255, 255, 255);
    }

    .pro-body .header {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;

        height: 90px;
        background-color: rgb(255, 255, 255);

    }

    .pro-body .header .search {
        display: flex;

        width: 273px;
        align-items: center;
    }

    .pro-body .header .search .inp-left {
        display: block;

        width: 223px;
        height: 48px;
        padding: 0 10px;
        border: 1px solid rgb(224, 224, 224);
        margin-right: -1px;
    }

    .pro-body .header .search .inp-right {
        display: block;

        width: 50px;
        height: 50px;
        border: 1px solid rgb(224, 224, 224);
        margin-right: -1px;
    }

    .pro-body .header ul {
        display: flex;

        width: 800px;
        justify-content: center;
        align-items: center;
    }

    .pro-body .header ul a {
        display: inline-block;
        height: 40px;
        width: 120px;
        text-align: center;
        line-height: 40px;
    }

    .banner {
        background-color: green;
        height: 100px;
    }

</style>

<body>


<div class="top">
    <div class="content">
        <div class="left">
            <ul>
                <li><a href="#">小米官网</a></li>
                <li><span>|</span></li>
                <li><a href="#">小米商城</a></li>
                <li><span>|</span></li>
                <li><a href="#">小米澎湃OS</a></li>
                <li><span>|</span></li>
                <li><a href="#">小米骑车</a></li>
                <li><span>|</span></li>
                <li><a href="#">云服务</a></li>
                <li><span>|</span></li>
                <li><a href="#">IoT</a></li>
                <li><span>|</span></li>
                <li><a href="#">有品</a></li>
                <li><span>|</span></li>
                <li><a href="#">小爱开放平台</a></li>
                <li><span>|</span></li>
                <li><a href="#">资质证照</a></li>
                <li><span>|</span></li>
                <li><a href="#">协议规则</a></li>
                <li><span>|</span></li>
                <li><a href="#">下载app</a></li>
                <li><span>|</span></li>
                <li><a href="#">Select Location</a></li>
            </ul>
        </div>
        <div class="right">
            <ul class="login">
                <li><a href="#">登录</a></li>
                <li><span>|</span></li>
                <li><a href="#">注册</a></li>
                <li><span>|</span></li>
                <li><a href="#">消息通知</a></li>
            </ul>
            <div class="car">
                <a href="#">购物车(0)</a>
            </div>
        </div>
    </div>
</div>

<div class="pro-body">
    <div class="header">
        <ul>
            <li><a href="#">Xiaomi手机</a></li>
            <li><a href="#">Redmi手机</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">平板</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">社区</a></li>
        </ul>
        <div class="search">
            <input class="inp-left" type="text">
            <input class="inp-right" type="submit">
        </div>
    </div>
    <div class="banner"></div>
    <div>product</div>
</div>


</body>
</html>